<script setup>
import { reactive } from 'vue'
import categoryApi from '@/api/goods/CategoryApi'
import useViewEvent from '@/core/hooks/useViewEvent'
const state = reactive({
  visible: false, //
  loading: false // 加载开关
})
// 表单结构
const original = {
  id: null,
  parentId: 0, // 父ID parentId
  name: '', // 名称
  notes: '', // 备注
  thumb: '', // 缩图
  keywords: '', // 关键字
  idx: 1 // 排序
}
// 表单数据
const formState = reactive({})

// 初始化数据
const { InitializeData } = useViewEvent({state: state, remoteFetchData: categoryApi.getFormModelById, formState: formState, original: original })

// 向父组件暴露方法和属性
defineExpose({ InitializeData })
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`分类管理`"
    placement="right"
    :width="'30%'"
  >
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card draggable>
      <a-spin :spinning="state.loading">
        <!-- 表单内容 begin -->
        <a-descriptions :column="1" bordered :label-style="{width: '150px'}">
          <a-descriptions-item label="所属分类" :span="2"> {{ formState.parentName }}</a-descriptions-item>
          <a-descriptions-item label="名称">{{ formState.name }}</a-descriptions-item>
          <a-descriptions-item label="关键字">{{ formState.keywords }}</a-descriptions-item>
          <a-descriptions-item label="缩图">
            <a-image
              :width="200"
              :src="formState.thumb" />
          </a-descriptions-item>
          <a-descriptions-item label="排序">{{ formState.idx }}</a-descriptions-item>
          <a-descriptions-item label="备注">{{ formState.notes }}</a-descriptions-item>
          <a-descriptions-item label="创建时间/人">{{ formState.createOn }}/ {{ formState.createBy }}</a-descriptions-item>
        </a-descriptions>
      </a-spin>
    </a-card>
  </a-drawer>
</template>
